<template>
	<view class="login">
		<view class="user_top">
			<button v-if="!islogin" type="default" open-type="getUserInfo" @getuserinfo="getUserInfo" class="login_submit">立即登录/注册</button>
			<view v-else class="user_info">
				<view class="user_avatar"><image :src="userInfo.avatar_url" mode="scaleToFill"></image></view>
				<view class="user_name">
					{{ userInfo.name }}
					<view :class="['iconfont', userInfo.gender != 1 ? 'icon-girl' : 'icon-boy', 'user_gender']"></view>
				</view>
				<view class="user_signature">{{ userInfo.signature ? userInfo.signature : '快来分享一下你的心情吧' }}</view>
				<view class="user_datas">
					<view class="data_item">
						<text class="user_data_num">{{ userInfo.articles }}</text>
						<text class="user_data_lable">篇段子</text>
					</view>
					<view class="data_item">
						<text class="user_data_num">{{ userInfo.likes }}</text>
						<text class="user_data_lable">获赞</text>
					</view>
				</view>
			</view>
			<view class="setting"><text class="iconfont icon-shezhi" @click="setting"></text></view>
		</view>
		<view class="user_options">
			<view class="option_item" @click="gotoPage('my_articles')">
				<view class="iconfont icon-fuzhi option_icon" style="color: #7089FD;"></view>
				<view class="option_name">我的贴子</view>
			</view>
			<view class="option_item" @click="gotoPage('my_likes')">
				<view class="iconfont icon-dianzan option_icon" style="color: #00ABFF;"></view>
				<view class="option_name">我的点赞</view>
			</view>
			<view class="option_item" @click="gotoPage('my_comments')">
				<view class="iconfont icon-daipingjia option_icon" style="color: #FE5E8E;"></view>
				<view class="option_name">我的评论</view>
			</view>
			<view class="option_item" @click="gotoPage('my_history')">
				<view class="iconfont icon-shijian1 option_icon" style="color: #FFCA70;"></view>
				<view class="option_name">浏览记录</view>
			</view>
		</view>
		<view class="option_list">
			<general-list-item
				@clickCall="show_tis"
				title1="我的下载"
				title2="下载内容都在这里哦~"
				icon_class="icon-shoucang"
				icon_size="50"
				icon_color="#FE5E8E"
			></general-list-item>
			<general-list-item @clickCall="show_tis" title1="小黑屋" title2="投诉与举报~" icon_class="icon-jubao" icon_size="50" icon_color="#000"></general-list-item>
			<general-list-item @clickCall="show_tis" title1="帮助与反馈" title2="为你解答~" icon_class="icon-huifu" icon_size="50" icon_color="#FFCA70"></general-list-item>
			<general-list-item @clickCall="show_tis" title1="推荐给好友" title2="GO~" icon_class="icon-fenxiang1" icon_size="50" icon_color="#7089FD"></general-list-item>
		</view>
	</view>
</template>

<script>
import GeneralListItem from '../../components/commonComponent/GeneralListItem.vue';
export default {
	components: {
		GeneralListItem
	},
	data() {
		return {
			phone: '',
			phone_status: false,
			phone_msg: '请输入手机号,这是找回的唯一凭证',
			Inv: 0
		};
	},
	onReady() {
		console.log('read');
	},
	methods: {
		loingOut() {
			if (!this.$store.state.login.isLogin) {
				uni.showToast({
					title: '您还没登陆哦！',
					icon: 'none'
				});
				return;
			}
			uni.showModal({
				title: '确定要退出吗?',
				success: res => {
					if (res.confirm) {
						this.$store.commit('login/loingOut');
					} else {
						uni.showToast({
							title: '谢谢',
							icon: 'none'
						});
					}
				}
			});
		},
		clearCache() {
			uni.showModal({
				title: '确定要清除缓存数据吗?(不可恢复)',
				success: res => {
					if (res.confirm) {
						this.$store.commit('articleCache/removeAllBrowsingHistory');
					}
				}
			});
		},
		getUserInfo() {
			uni.showLoading({
				title: '登录中...',
				mask: true
			});
			uni.login({
				success: res => {
					let code = res.code;
					uni.getUserInfo({
						success: userInfo => {
							let platform = 'qq';
							//#ifdef MP-WEIXIN
							platform = 'wx';
							//#endif

							this.$http
								.request({
									url: '/api/user/auth/sapp/',
									method: 'post',
									data: {
										encrypted_data: userInfo.encryptedData,
										iv: userInfo.iv,
										code: code,
										platform: platform
									}
								})
								.then(reInfo => {
									if (reInfo.statusCode == 200) {
										let token = reInfo.data.result.token;
										let newUser = reInfo.data.result.newUser;
										let userInfo = reInfo.data.result.user_info;
										this.$store.commit('login/login', {
											token,
											userInfo
										});
									} else {
										uni.showToast({
											icon: 'none',
											title: '发生错误，请重新尝试'
										});
									}
									uni.hideLoading();
								})
								.catch(error => {
									uni.hideLoading();
									uni.showToast({
										icon: 'none',
										title: '授权服务器发生异常'
									});
								});
						},
						fail: error => {
							uni.hideLoading();
						}
					});
				},
				fail: error => {
					uni.hideLoading();
					uni.showToast({
						icon: 'none',
						title: '授权失败了，请重新试试'
					});
				}
			});
		},
		verfiyPhone(e) {
			let telStr = /^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/;
			if (!telStr.test(this.phone)) {
				this.phone_status = false;
				this.phone_msg = '手机号码输入不规范';
			} else {
				this.phone_status = true;
				this.phone_msg = '验证成功,手机号是找回的唯一凭证!';
			}
		},
		changeTab(Inv) {
			that.navIdx = Inv;
		},
		gotoPage(page_url) {
			uni.navigateTo({
				url: page_url
			});
		},
		show_tis(tis = '功能完善中！敬请期待') {
			uni.showToast({
				icon: 'none',
				title: tis
			});
		},
		setting() {
			uni.showActionSheet({
				itemList: ['设置个人信息', '清除软件缓存', '退出登陆'],
				success: res => {
					console.log(res);

					switch (res.tapIndex) {
						case 0:
							this.show_tis();
							break;
						case 1:
							this.clearCache();
							break;
						case 2:
							this.loingOut();
							break;
						default:
							console.log(res);
							break;
					}
				}
			});
		}
	},
	computed: {
		islogin() {
			return this.$store.state.login.isLogin;
		},
		userInfo() {
			return this.$store.state.login.userInfo;
		}
	}
};
</script>

<style lang="scss" scoped>
page {
	width: 100%;
	height: 100%;
}

.login {
	width: 100%;
	height: 100%;
	flex-wrap: wrap;
}

.user_top {
	position: relative;
	height: 400rpx;
	background: url(../../static/img/user_no_login_bg.jpg) no-repeat;
	background-size: 100% 100%;
	width: 100%;
	flex-shrink: 0;
	.setting {
		position: absolute;
		top: 20rpx;
		right: 20rpx;
		.icon-shezhi {
			font-size: 45rpx;
			color: #fff;
		}
	}
	// align-items: center;
}

.login_submit {
	color: #007aff;
	background-color: white;
	border-radius: 50rpx;
	font-size: 35rpx;
	height: 80rpx;
	padding: 0 30rpx;
	margin-top: 150rpx;
}

.user_info {
	height: 300rpx;
	width: 100%;
	margin-top: 100rpx;
	flex-wrap: wrap;
	// justify-content: flex-start;
}

.user_avatar {
	width: 80%;
	height: 124rpx;
	flex-shrink: 0;
}

.user_avatar image {
	width: 120rpx;
	height: 120rpx;
	border-radius: 60rpx;
	// margin-top: 25rpx;
	margin-left: 50rpx;
	border: 2rpx solid #ffffff;
}

.user_name,
.user_signature,
.user_datas {
	// display: block !important;
	width: 100%;
	flex-shrink: 0;
	margin-left: 50rpx;
	color: #ffffff;
}

.user_name {
	font-size: 30rpx;
	font-weight: 600;
	// height: 30rpx;
}

.user_signature {
	font-size: 20rpx;
}

.data_item {
	// font-size: rpx;
	margin-right: 20rpx;
	vertical-align: bottom;
}

.user_data_num {
	font-size: 30rpx;
	font-weight: 600;
}

.user_data_lable {
	font-size: 25rpx;
	margin-left: 10rpx;
}

.user_gender {
	margin-left: 15rpx;
}

.icon-girl {
	background-color: pink;
	color: white;
	border-radius: 40rpx;
	font-size: 30rpx;
	height: 40rpx;
	width: 40rpx;
	text-align: center;
	line-height: 45rpx;
}

.icon-boy {
	background-color: #007aff;
	color: white;
	border-radius: 40rpx;
	font-size: 30rpx;
	height: 40rpx;
	width: 40rpx;
	text-align: center;
	line-height: 45rpx;
}

.user_options {
	height: 100rpx;
	width: 100%;
	flex-shrink: 0;
	background-color: white;
	padding-top: 25rpx;
}

.option_item {
	flex-shrink: 0;
	width: 25%;
	height: 120rpx;
	flex-direction: column;
	align-items: center;

	.option_name {
		font-size: 28rpx;
	}

	.option_icon {
		font-size: 50rpx;
	}
}

.option_list {
	width: 100%;
	flex-wrap: wrap;
	margin-top: 10rpx;
}

general-list-item {
	width: 100%;
}
</style>
